<template>
  <div class="home h100">
    <div ref="brand" class="brand">
      <div v-for="(value, key) in brand" :id="key" :key="key">
        <h5>
          {{ key }}
        </h5>
        <ul class="oul">
          <li
            v-for="item in value"
            @click="showPopUp(item.MasterID)"
            :key="item.MasterID"
          >
            <div class="left">
              <img v-lazy="item.CoverPhoto" alt="" />
            </div>
            <div class="right">
              {{ item.Name }}
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 品牌 -->
    <NavLetters
      :letters="letters"
      :index="index"
      @changeIndex="(newIndex) => (index = newIndex)"
    />

    <!-- 弹出框 -->
    <div v-if="flag">
      <PopUp @changeFlag="(newFlag) => (flag = newFlag)">
        <div v-for="item in brandCars" :key="item.GroupId">
          <h5>
            {{ item.GroupName }}
          </h5>
          <ul class="oul">
            <li
              v-for="items in item.GroupList"
              @click="pushDetail(items.SerialID)"
              :key="items.SerialID"
            >
              <div class="left w90">
                <img class="w90 h60" v-lazy="items.Picture" alt="" />
              </div>
              <div class="right">
                <p class="l28 popup_title">
                  {{ items.AliasName }}
                </p>
                <p class="l28 red">
                  {{ items.DealerPrice }}
                </p>
              </div>
            </li>
          </ul>
        </div>
      </PopUp>

      <!-- <div
        v-if="flag"
        @touchstart="touchStart"
        @touchmove.prevent="touchMove"
        @touchend="touchEnd"
        ref="popup"
        class="popup"
      >
        <div v-for="item in brandCars" :key="item.GroupId">
          <h5>
            {{ item.GroupName }}
          </h5>
          <ul class="oul">
            <li
              v-for="items in item.GroupList"
              @click="pushDetail(items.SerialID)"
              :key="items.SerialID"
            >
              <div class="left w90">
                <img class="w90 h60" v-lazy="items.Picture" alt="" />
              </div>
              <div class="right">
                <p class="l28 popup_title">
                  {{ items.AliasName }}
                </p>
                <p class="l28 red">
                  {{ items.DealerPrice }}
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import NavLetters from "@/components/home/NavLetters";
import PopUp from "@/components/home/PopUp";
import { mapActions, mapState } from "vuex";
export default {
  name: "Home",
  created() {
    this.init();
  },
  components: {
    NavLetters,
    PopUp,
  },
  data() {
    return {
      index: -1,
      flag: false,
      // 保存按下时的信息
      prepos: null,
      // 保存移动时的信息
      curpos: null,
      // 记录MasterID
      MasterID: null,
    };
  },
  computed: {
    ...mapState("CarList", ["brand", "letters", "brandCars"]),
  },
  watch: {
    index(newVal) {
      if (this.index !== -1) {
        this.$refs.brand.scrollTop = document.getElementById(
          this.letters[newVal]
        ).offsetTop;
      }
    },
  },
  methods: {
    // mapActions(模块名称)
    ...mapActions("CarList", ["init", "getBrandCars"]),
    showPopUp(MasterID) {
      this.flag = true;
      if (MasterID !== this.MasterID) {
        this.getBrandCars({
          MasterID
        })
        this.MasterID = MasterID
      }
    },
    // 跳转详情
    pushDetail(SerialID) {
      this.$router.push(`/detail/${SerialID}`);
    },
    // // 按下
    // touchStart({ touches }) {
    //   this.prepos = touches[0];
    // },
    // // 移动
    // touchMove({ touches }) {
    //   this.curpos = touches[0];
    //   // 记录移动的位置
    //   let flow = this.curpos.pageX - this.prepos.pageX;
    //   // 临界判断
    //   if (flow < 0) {
    //     flow = 0;
    //   }
    //   // 设置样式
    //   this.$refs.popup.style.transform = `translateX(${flow}px)`;
    //   // console.log(flow)
    //   // popup
    // },
    // // 抬起
    // touchEnd() {
    //   // 记录移动的位置
    //   let flow = this.curpos.pageX - this.prepos.pageX;
    //   // 如果移动的距离是大于设备的十分之三,则收起
    //   if (flow > window.innerWidth * 0.3) {
    //     this.$refs.popup.style.transform = `translateX(${
    //       window.innerWidth * 0.7
    //     }px)`;
    //     this.flag = false;
    //   } else {
    //     this.$refs.popup.style.transform = `translateX(0)`;
    //   }
    // },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
h5 {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  background: #f4f4f4;
  padding-left: 14px;
  line-height: 18px;
}

.brand {
  height: 100%;
  overflow-y: scroll;
}

.oul {
  li {
    display: flex;
    padding-left: 20px;
    .left {
      width: 40px;
      img {
        width: 100%;
      }
    }
    .right {
      flex: 1;
      padding-left: 20px;
      line-height: 44px;
    }
  }
}

.w90 {
  width: 90px !important;
}

.h60 {
  height: 60px;
}

.popup_title {
  font-size: 18px;
}
.red {
  color: red;
}

.l28 {
  line-height: 28px;
}
</style>
